<template>
    <el-form :model="form" label-width="auto" style="max-width: 900px">
        <el-form-item label="菜品名称">
            <el-input v-model="form.menuName" />
        </el-form-item>
        <el-form-item label="菜品图片">
            <el-input v-model="form.menuImg" />
        </el-form-item>
        <el-form-item label="菜品介绍">
            <el-input v-model="form.menuDesc" type="textarea" />
        </el-form-item>
        <el-form-item label="销售价">
            <el-radio-group v-model="form.priceType">
                <el-radio label="single">单一售价</el-radio>
                <el-radio label="specification">启用规格</el-radio>
            </el-radio-group>
            <el-input v-if="form.priceType === 'single'" v-model="form.price"></el-input><span>库存</span>
            <el-input v-if="form.priceType === 'single'" v-model="form.inventory"></el-input>
        </el-form-item>
        <el-form-item label="菜品口味">
            <el-switch v-model=" form.isopens" va></el-switch>
            <span>口味名称</span>
            <el-input v-if="form.isopens" v-model="form.taste" placeholder="例：辣度" maxlength="4" show-word-limit
                style="width: 200px; margin-top: 10px;"></el-input>
        </el-form-item>
        <el-form-item label="菜品分组">
            <el-select v-model="form.menuTYpeId">
                <el-option v-for="item in menuTypeList" :label="item.menuTypeName" :value="item.id"></el-option>
            </el-select>
            <el-button link type="primary" @click="addmenutype()">新建分组</el-button>
        </el-form-item>   
        <el-form-item label="售卖时段">
            <el-input v-model="form.sellingperiod" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
    <el-dialog v-model="dialogFormVisible" title="新增分组" width="500">
    <el-form :model="formtype">
      <el-form-item label="菜品分组" >
        <el-input v-model="formtype.menuTypeName" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="Addtypes()">确定</el-button>
         
        
      </div>
    </template>
</el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getmenutype,addMenulist,addmenutypelist } from "@/api/index.ts";
import { useRouter, useRoute } from "vue-router";
const router = useRouter()
const form = reactive({
    menuName: '',
    menuImg: '',
    menuDesc: '',
    price: '',
    inventory: '',
    taste: '',
    menuTYpeId: '',
    sellingperiod: '',
    status: true,
    priceType: '',
    isopens:true,
   
})
onMounted(()=>{
    GetMenusType()
})
const menuTypeList = ref([])
const GetMenusType=()=>{
    getmenutype().then((res)=>{
        menuTypeList.value=res.data
        console.log(menuTypeList.value)
    })
}
const onSubmit = () => {
    addMenulist(form).then((res)=>{
        if(res.code==200){
            ElMessage.success("添加成功")
            router.push('/DishesView')
        }else{
            ElMessage.error("添加失败")
        }
    })
}
const formtype=reactive({
    menuTypeName:''
})
const dialogFormVisible = ref(false)
const addmenutype=()=>{
    dialogFormVisible.value=true
}
const Addtypes=()=>{
    addmenutypelist(formtype).then((res)=>{
        if(res.code==200){
            ElMessage.success("添加成功")
            dialogFormVisible.value=false
            GetMenusType()
        }else{
            ElMessage.error("添加失败")

        }
    })
}
</script>